import React, { PureComponent } from 'react';
import moment from 'moment';
import PropTypes  from 'prop-types';

class Year extends PureComponent{
  _renderMonths = () => {
    const { yearText, renderFullMonth } = this.props;
    const Years = yearText ? yearText.map((value, index) => {
      return { month: index + 1, monthText: value };
    }) : [...new Array(12)].map((value, index) => {
      return { month: index + 1, monthText: `${index + 1}月`}
    });
    let num = -3;
    return (
      <table frame='void' rules='none' style={{ width: '100%', height: '100%'}}>
        <tbody>
        {[...new Array(4)].map((value, index) => {
          num += 3;
          return (<tr key={`year-row-${index}`}>
            {[...new Array(3)].map((childValue, childIndex) => {
              return (
                <td key={`month-${num + childIndex}`}>{renderFullMonth(Years[num + childIndex])}</td>
              )
            })}
          </tr>)
        })}
        </tbody>
      </table>
    );
  };
  render(){
    return(
        <div className={this.props.className}>
          {this._renderMonths()}
        </div>
    )
  }
}
const initStyle = {
  margin: '0 auto',
  width: '34px',
  height: '34px',
  lineHeight: '34px',
  fontSize: '16px',
  color: 'rgba(0, 0, 0, 0.65)',
  textAlign: 'center',
  fontFamily: '"Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'}
// 默认每个日期单元格的渲染，如果用户有自定义，会将此覆盖
const _initMonthRender = (month, year) => {
  return(
    <div className='month-month-wrapper' style={initStyle}>
      {month.monthText}
    </div>
  )
};

Year.defaultProps = {
  renderFullMonth: _initMonthRender,
  className: 'calendar-year'
};

Year.prototypes = {
  yearText: PropTypes.array,
  renderFullMonth: PropTypes.func,
}
export default Year;
